﻿@{
    ViewBag.Title = "JQueryEvents";
}
<script>
    $(document).ready(function () {
        //Alle Childs verstecken bis auf das erste
        $('dd').filter(':nth-child(n+4)').hide();

        //Nur einen Event Listener Anlegen für (hover) auf die Liste 
        //und dann mit 'dt' sagen auf welche Elemente der Listener wirken soll
        $('dl').on('mouseenter', 'dt', function () {
            var alldd = $('dd');
            alldd.slideUp(200);
            $(this).next().slideDown(200);
        });

    });
</script>
<h2>
    JQueryEvents</h2>
<section id="main2">
    <dl>
        <dt>What are your hours</dt>
        <dd>
            We are open 24/7</dd>
        <dt>What are your hours</dt>
        <dd>
            We are open 24/7</dd>
        <dt>What are your hours</dt>
        <dd>
            We are open 24/7</dd>
        <dt>What are your hours</dt>
        <dd>
            We are open 24/7</dd>
        <dt>What are your hours</dt>
        <dd>
            We are open 24/7</dd>
    </dl>
</section>